<template>
  <div>
    <a-comment
      v-for="(item, key) in comments"
      :key="key"
      v-show="item.isPublic || item.uid === $store.state.userKey"
    >
      <!-- <span slot="actions" @click="replyTo(item.uid)">回复</span> -->
      <span
        slot="actions"
        v-show="item.uid == $store.state.userKey"
        @click="deleteComment(item.key, item.sectionKey)"
        >删除</span
      >
      <span
        slot="actions"
        @click="changeState(item.key, item.isPublic)"
        v-show="item.uid === $store.state.userKey"
        >{{ item.isPublic ? '设为私密' : '设为公开' }}</span
      >
      <span
        slot="actions"
        style="color:skyblue;cursor:auto;"
        @click="setPublic(item.key)"
        >{{ item.isPublic ? '公开状态' : '私密状态' }}</span
      >
      <span slot="actions" @click="like(item.uid, item.key)"
        ><a-icon type="like"
      /></span>
      <span slot="actions">{{ item.likeNum === 0 ? '' : item.likeNum }}</span>
      <a slot="author">{{ item.userName }}</a>
      <a-avatar slot="avatar" :src="item.avatar" :alt="item.userName" />
      <p slot="content">
        {{ item.content }}
      </p>
      <span
        slot="content"
        style=""
        v-for="(pic, keys) in item.pictures"
        :key="keys"
        v-show="item.pictures[0]"
      >
        <img slot="content" :src="pic ? URL + '/' + pic.url : ''" alt="" />
      </span>

      <CommentBox
        class="comment"
        :userInfo="userInfo"
        :reply-info="replyInfo"
        :id="item.uid"
        @submit-box="submitBox"
        @cancel-box="cancelBox"
      ></CommentBox>

      <!-- <CommentList :comments="item.reply"></CommentList> -->
    </a-comment>
  </div>
</template>
<script>
import { mapMutations } from 'vuex'
import CommentBox from '../components/CommentBox'
import { URL } from '../api/api.js'
export default {
  name: 'CommentList',
  props: ['comments'],
  data() {
    return {
      URL: URL,
      showCancle: true,
      submitting: false,
      value: '',
      userInfo: {
        uid: 'uid000001',
        userName: '张三',
        avatar:
          'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
      },
      replyInfo: {
        uid: '',
        blogUid: 'uid000003',
        replyUserUid: 0,
        avatar:
          'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
      },
    }
  },
  created() {},
  components: {
    CommentBox,
  },

  compute: {},
  methods: {
    ...mapMutations(['setCommentList', 'increment']),
    replyTo: function(uid) {
      var lists = document.getElementsByClassName('comment')
      for (var i = 0; i < lists.length; i++) {
        lists[i].style.display = 'none'
      }
      document.getElementById(uid).style.display = 'block'
      this.replyInfo.replyUid = uid
    },
    submitBox(e) {
      // 一级评论
      if (e.replyUid == 0) {
        var firstComment = this.$store.state.commentList
        firstComment.push(e)
        this.$store.commit('setCommentList', firstComment)
        this.$store.commit('increment')
        return
      }

      document.getElementById(e.replyUid).style.display = 'none'
      var comments = this.$store.state.commentList
      this.updateCommentList(comments, e.replyUid, e)
      this.$store.commit('setCommentList', comments)
      this.$store.commit('increment')
    },
    cancelBox(e) {
      document.getElementById(e).style.display = 'none'
    },
    updateCommentList(commentList, uid, targetComment) {
      if (commentList == undefined || commentList.length <= 0) {
        return
      }

      for (let item of commentList) {
        if (item.uid === uid) {
          var menu = item.reply
          menu.push(targetComment)
        } else {
          this.updateCommentList(item.reply, uid, targetComment)
        }
      }
    },
    // 删除评论
    deleteComment(key, sKey) {
      this.$emit('delete-comment', key, sKey)
    },
    //设置评论状态
    changeState(key, isPublic) {
      // this.axios.post('/course/change_note_status/',{
      //     note_key:key,
      //     is_public:isPublic===1?0:1,
      // })
      this.$emit('change-state', key, isPublic)
    },
    // 点赞
    like(uid, key) {
      this.$emit('like', uid, key)
    },
  },
}
</script>
<style>
.comment {
  display: none;
}
</style>
